<template>
    <div class="remindNews">
        <div class="top">消息提醒</div>
        <div class="main-content">
            <div class="xx-list">
                <div v-for="(item, index) in messageList" :key="index" class="xx-item">
                    <div class="left">
                        <span v-html="item.info"></span>
                        <span class="ckxq" @click="goOrder(item)">查看详情</span>
                    </div>
                    <div class="right">
                        {{ getTime(item.createtime * 1000) }}
                    </div>
                </div>
                <el-skeleton v-show="loading" :rows="6" />
                <el-empty v-show="!loading && messageList.length == 0" description="暂无数据"></el-empty>
            </div>
            <div class="pagination">
                <el-pagination background layout="prev, pager, next" :total="total" :page-size="10"
                    :current-page.sync="page" @current-change="getmessage">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import { getmessage } from "@/assets/api/userCenterApi";

import { getTime } from "@/assets/utils/utils";
export default {
    name: "RemindNews",
    data() {
        return {
            messageList: [],
            getTime: getTime,
            total: 0,
            page: 1,
            loading: false
        };
    },
    computed: {},
    watch: {},
    created() { },
    beforeMount() { },
    mounted() {
        this.getmessage(1);
    },
    methods: {
        async getmessage(page) {
            this.loading = true
            this.page = page;
            const res = await getmessage({
                page: this.page,
                pagesize: 10,
                type: 13,
            });
            this.loading = false
            if (res.code == 1) {
                this.messageList = res.data;
                if (res.data.length > 0) this.total = res.data[0].datacount;
            }
        },
        goOrder(item) {
            this.$router.push({
                path: "/service/shoporder",
                query: {
                    orderNo: item.from_id,
                },
            });
        },
    },
};
</script>
<style lang='scss' scoped>
.remindNews {
    background-color: #fff;
    min-height: 500px;

    .top {
        padding-left: 40px;
        width: 100%;
        height: 63px;
        line-height: 63px;
        border-bottom: 1px solid #eaeaea;
    }
}

.main-content {
    background-color: #fff;
    padding: 25px 30px;
    padding-bottom: 30px;

    .title {
        font-size: 16px;
        font-weight: 500;
        color: #333333;
        padding-bottom: 23px;
    }

    .xx-list {
        padding: 14px 50px;

        .xx-item {
            display: flex;
            justify-content: space-between;
            padding: 14px 0;

            .left {
                font-size: 13px;
                color: #333333;

                .ckxq {
                    color: #1e6cb5;
                    text-decoration: underline;
                    cursor: pointer;
                }
            }

            .right {
                font-size: 14px;
                color: #999999;
            }
        }
    }
}

.pagination {
    text-align: center;
}
</style>